<template>
    <div class="navbar h5-box">
       <div class="navbar_inner l-f l-row-sb">
            <div class="navbar_left l-f">
                <img class="navbar_left_icon" src="@/assets/logo.svg" alt="">
                <p class="navbar_left_title">IG Group</p>
            </div>
            <div class="navbar_right">
                <div @click="onShowMenu" class="l-f l-row-sb">
                    <p class="navbar_right_value">UID：{{uId}}</p>
                    <img class="navbar_right_icon" src="@/assets/icons/icon-down.svg" alt="">
                </div>
                <div class="navbar_menu" v-if="showMenu">
                        <div class="navbar_menu_item l-f">
                            <svg class="navbar_menu_item_icon" data-v-a3549ec0="" id="identicon-menu" width="25" height="25" data-jdenticon-value="address" viewBox="0 0 25 25" preserveAspectRatio="xMidYMid meet"><path fill="#e0bae8" d="M9.5 7L7 4.5L9.5 2L12 4.5ZM12 4.5L14.5 2L17 4.5L14.5 7ZM14.5 17L17 19.5L14.5 22L12 19.5ZM12 19.5L9.5 22L7 19.5L9.5 17ZM4.5 12L2 9.5L4.5 7L7 9.5ZM17 9.5L19.5 7L22 9.5L19.5 12ZM19.5 12L22 14.5L19.5 17L17 14.5ZM7 14.5L4.5 17L2 14.5L4.5 12Z"></path><path fill="#545454" d="M7 7L2 7L2 4.5ZM17 7L17 2L19.5 2ZM17 17L22 17L22 19.5ZM7 17L7 22L4.5 22Z"></path><path fill="#c275d1" d="M7 7L12 7L12 10.5L9 9L10.5 12L7 12ZM17 7L17 12L13.5 12L15 9L12 10.5L12 7ZM17 17L12 17L12 13.5L15 15L13.5 12L17 12ZM7 17L7 12L10.5 12L9 15L12 13.5L12 17Z"></path></svg>
                            <p class="navbar_menu_item_label">UID：{{uId}}</p>
                        </div>
                        <div class="navbar_menu_item l-f" @click="onLogout">
                            <img class="navbar_menu_item_icon" src="@/assets/icons/icon-logout.svg" alt="">
                            <p class="navbar_menu_item_label">{{$t('login.logOut')}}</p>
                        </div>
                </div>
            </div>
       </div>
    </div>
    <!-- 弹窗 -->
     <div class="popup-mask" v-if="showMenu" @click.stop="onShowMenu" @touchmove.stop.prevent="" ></div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useMainStore } from '@/store'
import { postLogoutApi } from '@/api/userApi'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'

const mainStore = useMainStore()
const router = useRouter()

const showMenu = ref(false)

 const uId = computed(() => {
    return mainStore.userInfo.id
})

const onShowMenu = () => {
    showMenu.value = !showMenu.value
}

const onLogout = async () => {
    const res = await postLogoutApi()
    mainStore.setToken('')
    message.success(res)
    setTimeout(() => {
        router.replace('/login')
    },800)
}

</script>

<style lang="scss" scoped>
.h5-box {
    display: none;
}
.navbar {
    background: #070628;
    padding: 15px 20px;
    box-sizing: border-box;
    // position: sticky;
    // top: 0;
    // z-index: 4;
    position: relative;
    &_left {
        &_icon {
            width: 37px;
            height: 30px;
        }
        &_title {
            font-size: 14px;
            color: #ffffff;
            margin-left: 4px;
        }
    }
    &_right {
        min-width: 160px;
        border: .6px solid #ffffff;
        border-radius: 38px;
        height: 36px;
        padding: 5px 14px;
        color: #fff;
        position: relative;
        z-index: 3;
        &_value {
            font-size: 14px;
            color: #ffffff;
            margin-right: 10px;
        }
        &_icon {
            width: 12px;
            height: 12px;
        }
    }
    &_menu {
        border-radius: 8px;
        position: absolute;
        overflow: clip;
        width: 100%;
        top: 43px;
        left: 0;
        background: #141831;
        box-shadow: 0 3px 8px #00000012, 0 -3px 8px #0000003b;
        z-index: 10;
        &_item {
            padding: 10px 15px;
            box-sizing: border-box;
            cursor: pointer;
            &_icon {
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background-color: #ffffff;
            }
            &_label {
                font-size: 12px;
                font-weight: 500;
                margin-left: 8px;
            }
        }
    }
}
.popup-mask {
    background: #000000b3;
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}
@media only screen and (max-width: 1200px) {
    .h5-box {
        display: block;
    }
}
</style>